<template>
    <div class="project" >
        <img class="project-cover" v-bind:src="product.tupian[0]" alt="">
        <div class="project-info">
            <p class="project-name" @click="bindToDetail()">{{product.name}}</p>

            <!--<div class="point">
                <div class="point-icon"></div>
                <span class="point-num">{{product.need_point}}</span>
            </div>-->
            <div class="project-btn-info">
                <div class="person-number">
                    <span>总数 {{product.count}}份</span>
                </div>
                <div class="btn project-btn" @click="bindToDetail()">免费领取 ></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FreeProduct",
        props:{
            product: {
                type: Object,
                default: {}
            },
        },
        watch: {
            product: {
                immediate: true,  // 这是为了第一次拿到值的时候就对sd进行监听
                handler( val, oldval ) {

                }
            }
        },
        methods:{

            bindToDetail( ) {

                this.$router.push( '/product/' + this.product.cid )
            }
        }
    }
</script>

<style scoped>
    .project {
        display: flex;
        flex-direction: row;
        border-bottom: #F0F0F2 1px solid;
        padding: 20px 0;
    }
    .project:last-child {
        border-bottom: none;
    }
    .project .project-cover {
        width: 168px;
        height: 168px;
        margin-right: 24px;
    }

    .project-info {
        display: flex;
        flex-direction: column;
        width:520px;
    }

    .project-info .project-name {
        margin-bottom: 20px;
        font-weight: 500;
        font-size:30px;
    }

    .project-info .project-btn-info {
        margin-top: 30px;
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
    }

    .project-info .project-btn {
        border-radius: 26px;
        background: linear-gradient(to bottom right, #FF7F53, #FF5B4B);
        color: #FFF;
        width: 165px;
        height: 52px;
        line-height: 52px;
        text-align: center;
        padding: 0;
        font-size: 24px;
        font-weight: 600;
        border: 0;
    }

    .person-number {
        font-size: 20px;
        line-height:52px;
        text-align: right;
        height:52px;
        }
</style>
